<template>
    <div id="background">
        <h1>你好,这个是一只笨蛋猫猫写的个人主页</h1>
    </div>
</template>

<script setup>
    import { onMounted } from 'vue';
    import { onBeforeUnmount } from 'vue'; 
  onMounted(() => {
    // 创建并添加样式标签
    const style = document.createElement('style');
    style.id = 'page3-style';
    style.textContent = `
      .ui{
      width;250px:
      }
    `;
    document.head.appendChild(style);
});
  onBeforeUnmount(() => { // Vue3 用组合式 API 的 onBeforeUnmount
    // 页面销毁时移除样式
    const style = document.getElementById('page3-style');
    if (style) {
        document.head.removeChild(style);
    }
});
</script>

<style>
:root {
    --back: rgb(142, 171, 229);
}

#background {
    height: 100vh;
    background-color: var(--back);
    display: flex;
    justify-content: center;
    align-content: center;
}

</style>